<template>
  <!-- 人员管理下的管理员模块 -->
    <div>
      <el-form :inline="true" :model="formInline" style="margin: 0;">
        <el-form-item label="">
          <el-input v-model="formInline.username" placeholder="用户名(支持模糊查询)"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.sex" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSelect">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  @click="onRest">重置</el-button>
        </el-form-item>
      </el-form>

      <el-divider style="margin: 0; padding: 0;"></el-divider>
      
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          fixed
          prop="last_login_time"
          label="近期登录时间"
          width="110">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="200">
        </el-table-column>

        <el-table-column
            prop="photo_url"
            label="头像"
            width="100">
          <template slot-scope="scope">
                  <img :src="scope.row.photo_url" min-width="70" height="70"/>
          </template>
        </el-table-column>

        <el-table-column
          prop="sex"
          label="性别"
          width="50">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="50">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="400">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="status"
          label="身份"
          width="110">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="账号创建时间"
          width="110">
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="近期修改时间"
          width="110">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClickDetail(scope.row)" type="text" size="small">详情</el-button>
              <el-button @click="handleClickEmlpoyee(scope.row)" type="text" size="small">员工</el-button>
            </template>
          </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allData.length"
          style="position: relative;top: 94%;"
          >
      </el-pagination>

      <AdminDialogBox :form="form"/>
      
      <AdminEmployee :tableData="employeeList"/>
    </div>
</template>

<script>
    import AdminDialogBox from './AdminDialogBox';
    import AdminEmployee from './AdminEmployee';
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'AdminManage',
        components:{
          AdminDialogBox,
          AdminEmployee
        },
        data() {
          return {
            // 查询的数据
            formInline:{
              username: '',
              phone: '',
              sex:'',
              age:'',
            },
            // 当前显示的数据
            tableData:[], 
            // 全部数据
            allData:[],

            // 用来记录当前一页是展示多少条数据,默认值是5
            itemDataTotal:5,
            // 对话框展示数据
            form:{},
            // 管理员所对应的下属员工
            employeeList:[]
          }
        },
        methods: {
          // 重置按钮
          onRest(){
            window.location.reload();
          },
          // 查询按钮
          onSelect() {
            if(this.formInline.username === '' && this.formInline.phone === '' && this.formInline.sex === '' && this.formInline.age === ''){
                this.$notify({
                  title: '警告',
                  message: '请输入条件后再来查询!',
                  type: 'warning'
                });
                return ;
            }
            myAxios(
              'http://localhost:8088/admin/getallbylike',
              'post',
              Qs.stringify(this.formInline),
              (data)=>{
                  if(data.length != 0){
                    this.allData = data;
                    // 初始化时显示前5条数据
                    this.tableData = this.allData.slice(0,5);
                  }else{
                    // 提示一下
                    this.$message({
                        message: '查询结果为空!',
                        type: 'warning'
                    });
                    this.formInline.username = '';
                    this.formInline.phone = '';
                    this.formInline.sex = '';
                    this.formInline.age = '';
                  }
              }
            );
          },
          // 每个管理员的详情
          handleClickDetail(row) {
            this.form = row;
            this.$bus.$emit('adminClickDialog');
          },
          // 每个管理员的下属员工
          handleClickEmlpoyee(row){
            myAxios(
              'http://localhost:8088/admin/getallemployeebyadminid?adminId='+row.id,
              'get',
              null,
              (data)=>{
                  if(data.length != 0){
                    this.employeeList = data;
                  }else{
                    const h = this.$createElement;
                    this.$notify({
                      title: '提示',
                      message: h('i', { style: 'color: teal'}, '该管理员没有下属员工!')
                    });
                  }
              }
            );
          },
          // 选择每页的展示条数
          handleSizeChange(val) {
            this.tableData = this.allData.slice(0,val);
            this.itemDataTotal = val;
          },
          // 显示第几页的数据
          handleCurrentChange(val) {
            this.tableData = this.allData.slice((val-1)*this.itemDataTotal,val*this.itemDataTotal);
          },
        },
        created(){

          // 通过请求拿到后台的管理员详细数据
          myAxios(
            'http://localhost:8088/admin/getalladmininfo',
            'get',
            null,
            (data)=>{
              this.allData = data;
              // 初始化时显示前5条数据
              this.tableData = this.allData.slice(0,5);
            }
          )
        },
    }
</script>

<style scoped>
.el-divider--horizontal {
    margin-top: 0;
}
</style>